import * as THREE from "three";
// 引入CSS3渲染器CSS3DRenderer
import { CSS3DRenderer, CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
// 引入CSS3模型对象CSS3DObject
import { CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer";
import { getDepth } from "../map"
import * as material from "../material"
import { createNumber } from "./LabelMesh"

// 创建柱状图, height圆柱高度
export const createBar = (point, size, self) => {
  const bar = self.bar
  const height = bar.value / bar.total * 20
  const { depth } = getDepth(size)
  const group = new THREE.Group();
  // 1. 柱状图
  const barMesh = createBarMesh(height)
  // 2. 标签
  // const tagMesh = createTag(bar, point)
  // 3. 数字
  const numberMesh = createNumber(bar.value)
  numberMesh.position.z = height + 1;
  group.add(barMesh, numberMesh);
  const [x, y] = point;
  group.position.set(x + 0.5, -y, depth + 0.2);
  group.scale.set(depth / 8, depth / 8, depth / 8);
  group.name = 'bar'
  return group
};

export function createBarMesh(height) {
  const cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, height, 100);
  cylinderGeometry.translate(0, height / 2, 0); // 将原点置于底部
  const barMesh = new THREE.Mesh(cylinderGeometry, material.bar.clone());
  barMesh.colorName = 'bar'
  barMesh.name = 'bar'
  barMesh.rotateX(Math.PI / 2);
  return barMesh
}

export const createTag = (self,) => {
  const div = document.createElement("div");
  div.style.color = "#f4ef99";
  div.style.width = "25px";
  div.style.height = "25px";
  div.style.lineHeight = "25px";
  div.style.textAlign = "center";
  div.style.fontSize = "14px";
  div.style.fontWeight = 700
  // div.style.textShadow = "1px 1px 2px #000000";
  div.style.borderRadius = '50%'
  div.style.border = '2px solid #818f97'
  div.style.backgroundColor = 'rgba($color: #000000, $alpha: 0.8)'
  div.textContent = 1;
  const tag = new CSS2DObject(div)
  tag.position.z = self.value;
  return tag;
};